<%--
    Document   : graphs
    Created on : 27.1.2013, 11:30:24
    Author     : Martin Zmítko <martin.zmitko@gmail.com>
--%>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/jsp/includes.jsp" %>

<!-- Nette like :-) -->
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<c:set var="actualURL" value='<%=request.getAttribute("javax.servlet.forward.request_uri")%>'/>

<!DOCTYPE html>
<html>
    <head>
        <!-- meta tagy -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <!-- stylovani -->
        <link href="${basePath}/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="${basePath}/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
        <link href="${basePath}/css/global.less" rel="stylesheet/less" type="text/css" />

        <!-- scripty nemenit poradi ! -->
        <script src="${basePath}/js/jquery-1.8.3.js" type="text/javascript"></script>
        <script src="${basePath}/js/less.js" type="text/javascript"></script>
        <script src="${basePath}/js/bootstrap.js" type="text/javascript"></script>
        <script src="${basePath}/js/effects.js" type="text/javascript"></script>

        <!--Load the AJAX API -->
            <!-- GRAF 1 detail otázek -->
              <script type="text/javascript" src="https://www.google.com/jsapi"></script>
                <script type="text/javascript">
                  google.load("visualization", "1", {packages:["corechart"]});
                  google.setOnLoadCallback(drawChart);
                  function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                        ['Otázky', 'Nemec', 'Adámek', 'Nývlt', 'Hoch'],
                        ['OT1',     10,      4,      2,      2],
                        ['OT2',      8,      5,      4,      4],
                        ['OT3',      5,      2,      5,      10],
                        ['OT4',     10,      1,      3,      2]
                      ]);
                    var options = {
                        title: 'Detailní vyhodnocení testu 1, kurz: ČJ - 2012/2013',
                         'width':700,
                         'height':300,
                         'is3D':true,
                         'colors':['#310062','#003153','#000080','#002FA7','#7B68EE','#6600FF','#007FFF','#0067A5'],
                         'backgroundColor':'white',
                        hAxis: {title: 'body', titleTextStyle: {color: 'blue'}}
                      };

                    var chart = new google.visualization.BarChart(document.getElementById('chart_div1'));
                    chart.draw(data, options);
                  }
                </script>


             <!-- GRAF 2 -->
             <script type="text/javascript" src="https://www.google.com/jsapi"></script>
                <script type="text/javascript">
                  google.load("visualization", "1", {packages:["corechart"]});
                  google.setOnLoadCallback(drawChart);
                  function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                      ['Testy', 'Body získané v daném testu'],
                      ['Test1',  10],
                      ['Test2',  5],
                      ['Test3',  7],
                      ['Test4',  3],
                      ['Test5',  9]
                    ]);

                    var options = {
                      title: 'Detailní úspešnost žáka v testech, kurz: ČJ - 2012/2013',
                      curveType: 'none',
                      pointSize: '5'
                    };

                    var chart = new google.visualization.LineChart(document.getElementById('chart_div2'));
                    chart.draw(data, options);
                  }
                </script>



    </head>
    <body>

    <div class="web content-not-intro">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span9">

                    <div class="row header">
                        <div class="span8">
                            <h1>Response system</h1>
                        </div>
                    </div>

                    <div class="menu">
                        <div class="boxes">
                            <div class="box box-s box-miniature <c:if test="${!fn:contains(actualURL, 'intro.do')}">box-animate</c:if>"><a href="intro.do">Domů</a></div>
                            <div class="box box-s box-miniature <c:if test="${!fn:contains(actualURL, 'courses.do')}">box-animate</c:if>"><a href="courses.do">Kurzy</a></div>
                            <div class="box box-s box-miniature <c:if test="${!fn:contains(actualURL, 'tests.do')}">box-animate</c:if>"> <a href="tests.do">Testy</a></div>
                            <div class="box box-s box-miniature <c:if test="${!fn:contains(actualURL, 'pupils.do')}">box-animate</c:if>"> <a href="pupils.do">Žáci</a></div>
                            <div class="box box-s box-miniature <c:if test="${!fn:contains(actualURL, 'resources.do')}">box-animate</c:if>"><a href="resources.do">Materiály</a></div>
                            <div class="box box-s box-miniature <c:if test="${!fn:contains(actualURL, 'graph.do')}">box-animate</c:if>"><a href="graph.do">Grafy</a></div>
                        </div>
                    </div>

                    <div class="content">


                        <!-- GOOGLE GRAPHS - TEST -->
                            <div class="alert alert-info">
                                <i class="icon-info-sign"></i> Ukázky grafů, googleGraphs
                            </div>



                        <!--Div that will hold the pie chart-->

                        <!-- GRAF1 -->
                        <div id="chart_div1"></div>  <br />

                        <!-- GRAF2 -->
                        <div id="chart_div2" style="width: 700px; height: 500px;"></div>










                        <!-- end div content -->
                        </div>

                    <!-- end span10 -->
                    </div>
                    <div class="span3 right-panel">
                        <c:choose>
                            <c:when test="${authenticated}">
                                <p><i class="icon-user icon-white"></i> <sec:authentication property="principal.username" /></p>
                                <p><i class="icon-bookmark icon-white"></i> <sec:authentication property="principal.authorities"/></p>
                                <hr />
                                <a class="pull-right myBtn" href="<c:url value="/j_spring_security_logout" />" >
                                    <i class="icon-white icon-off"></i> LOGOUT
                                </a>
                            </c:when>
                            <c:otherwise>
                                <a class="pull-right myBtn" href="login.html"><i class="icon-white icon-hand-right"></i> LOGIN</a>
                            </c:otherwise>
                        </c:choose>
                    </div>

                <!-- end row-fluid -->
                </div>
            <!-- end container-fluid -->
            </div>

        <!-- end web -->
        </div>
    </body>
</html>



